<?php
$kategoriak = $this->ctrl->kategoriak;
$termekek = $this->ctrl->termekek;
$lista = $this->ctrl->lista;
$osszeg = $this->ctrl->osszeg;

$max = 0;
?>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POS</title>
		<link rel="stylesheet" href="<?= $css; ?>style.css" media="screen">
		<link rel="stylesheet" href="<?= $css.$url[0].".css"; ?>" media="screen">
		<script type="text/javascript" src="<?= $js; ?>jquery.min.js"></script>
		<script type="text/javascript">
			function redirect(to){
				window.location.href = "index.php?url=" + to;
			}

			function writein(number){
				var mennyiseg = document.getElementById('mennyiseg');
				mennyiseg.value += '' + number;
				mennyiseg.focus();
			}

			function show(){
				$('#content').hide();
				$('#order').show();
				$('#mennyiseg').val('');
			}

			function hide(){
				$('#order').hide();
				$('#content').show();
			}
		</script>
	</head>

	<body>
		<div id="msg"><?= isset($msg) ? $msg : ""; ?></div>

		<div id="order">
			<form id="calc" action="" method="POST">
				<input type="hidden" name="termek" value="<?= $url[1]; ?>">
				<input type="text" id="mennyiseg" name="mennyiseg" value="" autofocus><br>
				<input type="button" value="7" onclick="writein('7');">
				<input type="button" value="8" onclick="writein('8');">
				<input type="button" value="9" onclick="writein('9');"><br>

				<input type="button" value="4" onclick="writein('4');">
				<input type="button" value="5" onclick="writein('5');">
				<input type="button" value="6" onclick="writein('6');"><br>

				<input type="button" value="1" onclick="writein('1');">
				<input type="button" value="2" onclick="writein('2');">
				<input type="button" value="3" onclick="writein('3');"><br>

				<input type="button" value="Mégse" onclick="hide()">
				<input type="button" value="0" onclick="writein('0');">
				<input type="submit" name="listahozadas" value="Ok">
			</form>
		</div>

		<div id="content">
			<div id="bal">
				<?php
					if(empty($url[1])){
						if($kategoriak != null){
							foreach($kategoriak as $kategoria){
								if($max < strlen($kategoria[1])){ $max = strlen($kategoria[1]); }
								print "<input type=\"button\" value=\"".$kategoria[1]."\" onclick=\"redirect('pos/".$kategoria[0]."');\">";
							}
						}
						else{
							print "Nincsenek kategóriák.";
						}
					}
					else{
						print "<input type=\"button\" value=\"Vissza\" onclick=\"redirect('pos');\">";
						$max = 6;
						if($termekek != null){
							foreach($termekek as $termek){
								if($max < strlen($termek[1])){ $max = strlen($termek[1]); }
								print "<input type=\"button\" value=\"".$termek[1]."\" onclick=\"show();\">";
							}
						}
						else{
							print "Nincsenek termekek a kategóriában.";
						}
					}
				?>
			</div>
			
			<div id="kozep">
				<div id="lista">
					<?php
					if($lista != null){
						foreach($lista as $elem){
							print "
								<div id=\"item\">
									<b>".$elem[0]."
									".$elem[1]."</b> 
									".$elem[2]." darab
									<span>".$elem[3]." Ft.</span>
								</div>
							";
						}
					}
					else{
						print "<center><b>Még nincsenek termékek a listában</b></center>";
					}
					?>
				</div>
				
				<div id="sum"><span>Összesen:</span><?= $osszeg; ?></div>
				
				<form action="" method="POST">
					<input type="submit" name="vasarlas" value="Vásárlás">
					
					<input type="submit" name="visszavonas" value="Visszavonás">
					
					<input type="submit" name="listatorlese" value="Lista törlése">
				</form>
			</div>
			
			<div id="jobb">
				<input type="button" value="Zárás" onclick="redirect('closing');">
				<input type="button" value="Termékek" onclick="redirect('products');">
			</div>
		</div>

		<div id="footer">
			<img src="<?= $img; ?>usr/<?= $usr[0]; ?>.png">
			<?= $usr[1]; ?>
			<span><input type="button" value="Kijelentkezés" onclick="redirect('&logout=');"></span>
		</div>

		<script type="text/javascript">
			function setSize(){
				$('#order').css({'height' : $(window).height()-50});
				$('#calc').css({'padding-top' : (($(window).height()-50)-$('#calc').height())/2});

				$('#content').css({'height' : $(window).height()-50-20});
				$('#bal').css({'height' : $('#content').height(), 'width' : $('#content').width()*0.5-5});
				$('#kozep').css({'height' : $('#content').height(), 'width' : $('#content').width()*0.3-10});
				$('#jobb').css({'height' : $('#content').height(), 'width' : $('#content').width()*0.2-5});
				$('#kozep input').css({'font-size' : ($(window).height()*0.4-35-20)/6});
				$('#jobb input').css({'font-size' : ($(window).height()*0.4-35-20)/6});
				$('#lista').css({'font-size' : $('#lista').width()*0.05});

				$('#bal input').css({
					'height' : $('#bal').height()*0.15,
					'width' : $('#bal').width()*0.15
				});

				$('#bal input').css({
					'font-size' : $('#bal input').width()*1.8/<?= $max; ?>
				});
			}

			$(window).resize(function(){ setSize(); });

			setSize();
			$('#order').hide();

			var msg = document.getElementById("msg");
			if(0 < msg.innerHTML.length){ alert(msg.innerHTML); }
		</script>
	</body>
</html>